<template>
<!-- 筛选区 -->
   <div  v-if="list.length" class="sub-filter" >
     <div class="item"  v-for="i in list" :key="i.id">
       <div class="head">{{i.name}}：</div>
       <div class="body">
           <!-- :class="{active:i.activeId ===undefined}" @click="i.activeId=undefined" -->
         <a href="javascript:;" :class="{ active: i.activeName === undefined }" @click="getAttr(i, {})">全部</a>
         <a href="javascript:;" :class="{active:i.activeName === item.name}"   @click="getAttr(i, item)" v-for="item in i.properties" :key="item.id">{{item.name}}</a>
       </div>
     </div>

   </div>
     <div v-else class="sub-filter" >
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
  </div>
</template>

<script>
// import { findSubCategoryFilter } from '@/api/category'
import { computed, inject, reactive, watch } from 'vue'
// import { useRoute } from 'vue-router'
import XtxSkeleton from '@/components/library/xtx-skeleton.vue'
import { useRoute } from 'vue-router'
export default {
  components: { XtxSkeleton },
  name: 'SubFilter',
  setup () {
    const route = useRoute()
    // 二级类目的数组
    const subCate = inject('subCate')
    const sortParams = inject('sortParams')
    // console.log(subCate)
    const brands = reactive({ id: null, name: '品牌', properties: subCate.value.brands })
    // 处理二级数据
    const list = computed(() => {
      return [
        brands,
        ...subCate.value.saleProperties
      ]
    })
    // 处理品牌选择其他id不会回到全部
    watch(() => route.params.id, () => {
      //  brands = reactive({ id: null, name: '品牌', properties: subCate.value.brands })
      brands.activeName = undefined
    })
    const getAttr = (theItem, theParams) => {
      // console.log(theItem, theParams)
      // 实现高亮
      theItem.activeName = theParams.name
      // 因为品牌的字段不一样
      if (theItem.name === '品牌') {
        sortParams.brandId = theParams.id
        return
      }
      // 先遍历  看有没有groupName这个属性
      const index = sortParams.attrs.findIndex(item => item.groupName === theItem.name)
      if (index === -1) {
        // 没找到
        sortParams.attrs.push({ groupName: theItem.name, propertyName: theItem.activeName })
      } else {
        // 如果有  那就给他最新的值
        sortParams.attrs[index].propertyName = theItem.activeName
      }
      // 过滤掉无效的数据 有这个字段的都过滤出来
      sortParams.attrs = sortParams.attrs.filter(item => item.propertyName)
    }
    return { list, getAttr }
  }
}
</script>

<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
   .xtx-skeleton {
      padding: 10px 0;
    }
</style>
